import React from 'react';

import {Button, Input, Alert} from 'antd';
import { browserHistory } from 'react-router';

import Form from '../components/form/Form';
import {Submit, FormInput} from '../components/form/reactJS';
import router from '../../utils/routerDecorator';

import {adminLogin} from '../../logic/user';
import styles from './main.less';

@router('/login')
export default class Login extends React.Component {

  state = {
    errhint:null
  }

  componentWillMount(){
  }

  onSubmit = async values => {
    var ret = await adminLogin(values.user, values.password);

    if (ret.ok){
      browserHistory.replace("/site");
    }else if (ret.status === 404 || ret.status === 400){
      this.setState({
        errhint:"账号或密码错误"
      })
    }
  }

  render(){
    return <div className = {styles.container}>
      <img src = "http://oalpta27j.bkt.clouddn.com/FhkZVKe_JR6OpjSmtbULcIbly8Qg"/>
      <Form onSubmit={this.onSubmit}>
        <div>
          <div className = {styles.forminputrow}>
            <label>账号</label>
            <FormInput className = {styles.forminput} name="user" type = "text"/>
          </div>

          <div className = {styles.forminputrow}>
            <label>密码</label>
            <FormInput className = {styles.forminput} name="password" type = "password"/>
          </div>
          
          {this.state.errhint?<div className = {styles.alert}><Alert message = {this.state.errhint} type = "error"/></div>:<div/>}

          <Submit>
            <Button onClick = {this.onSubmit}>管理员登录</Button>
          </Submit>
        </div>
      </Form>
    </div>
  }

}